<template>
    <div class="MainView">
        <el-collapse v-model="chunk1" @change="handleChange">
            <el-collapse-item title="房间信息" style="text-align: center" name="1">
                <el-row :gutter="24">
                    <el-col :span="8">房间id:{{ roomInfo.roomId }}</el-col>
                    <el-col :span="8">玩家总数:{{ roomInfo.playerCount }}</el-col>
                    <el-col :span="8">
                        <el-button type="danger" style="margin: 0px; padding: 2px;" round>退出</el-button>
                    </el-col>
                
                </el-row>
            </el-collapse-item>
        </el-collapse>
        <el-card class="fontSize">
            <el-row :gutter="24">
                <el-col v-for="(player,index) in playerList" :span="3">
                    <el-button type="primary" circle>{{ fixPlayerName(player.playerName.toString()) }}</el-button>
                    <el-button v-if="player.role=='大' || player.role == '小' || player.role=='枪'" type="danger" circle
                               class="roleStyle">{{ player.role }}
                    </el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-card>
            <el-row :gutter="24" class="fontSize">
                <el-col :span="12">当前轮次: {{ currentL }}</el-col>
                <el-col :span="12" style="float: right">当前发言玩家: {{
                        playerList[currentPlayer].playerName
                    }}
                </el-col>
            </el-row>
        </el-card>
        
        
        <!--        局内注码信息-->
        <el-card>
            <el-row :gutter="24" class="fontSize" style="margin-top: 5px; text-align: center">
                <el-col :span="3" style="font-size: 10px; padding: 0px;">姓名</el-col>
                <el-col :span="5">1</el-col>
                <el-col :span="5">2</el-col>
                <el-col :span="5">3</el-col>
                <el-col :span="5">4</el-col>
            </el-row>
            <br>
            <el-row :gutter="24" v-for="(player,index) in playerList">
                <el-col :span="3">
                    <el-button v-if="player.state == 1" type="primary" circle style="margin-left: -15px">{{
                            fixPlayerName(player.playerName.toString())
                        }}
                    </el-button>
                    <el-button v-else-if="player.state == -1" type="info" circle style="margin-left: -15px">
                        {{ fixPlayerName(player.playerName.toString()) }}
                    </el-button>
                    <el-button v-else-if="player.state == 2" type="warning" circle style="margin-left: -15px">
                        {{ fixPlayerName(player.playerName.toString()) }}
                    </el-button>
                </el-col>
                <el-col :span="5" v-for="chip in player.putChips" style="text-align: center">{{ chip }}</el-col>
            
            </el-row>
        </el-card>
        
        
        <!--         按钮栏-->
        <el-card>
            <el-row :gutter="24" class="fontSize10">
                <el-col :span="4" class="fontSize10 noPadding noMargin">
                    <el-button type="primary" size="mini" class="option">计分板</el-button>
                </el-col>
                <el-col :span="4" class="fontSize10 noPadding noMargin">
                    <el-button type="primary" @click="check" ref="optionCheck" size="mini" class="option">Check
                    </el-button>
                </el-col>
                <el-col :span="4" class="fontSize10 noPadding noMargin">
                    <el-button type="primary" size="mini" class="option">下注</el-button>
                </el-col>
                <el-col :span="4" class="fontSize10 noPadding noMargin">
                    <el-button type="primary" size="mini" class="option">跟注</el-button>
                </el-col>
                <el-col :span="4" class="fontSize10 noPadding noMargin">
                    <el-button type="danger" size="mini" class="option">弃牌</el-button>
                </el-col>
                <el-col :span="4" class="fontSize10 noPadding noMargin">
                    <el-button type="success" size="mini" class="option">结算</el-button>
                </el-col>
            </el-row>
        </el-card>
        
        <!--        游戏玩家信息栏-->
        <el-card style="float: bottom" class="fontSize">
            <el-col>游戏别名：{{ playerList[playerInfo].playerName }}</el-col>
            <el-col>当前筹码：{{ playerList[playerInfo].chip }}</el-col>
            <el-col>当前身份：{{ playerList[playerInfo].role }}</el-col>
        </el-card>
    </div>
</template>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<script>
export default {
    name: "de",
    data: function () {
        return {
            roomInfo: {
                roomId: "room1",
                count: 1,
                playerCount: 6,
            },
            playerList: [
                {
                    "playerId": "5",
                    "playerName": '前面',
                    "chip": 300,
                    "role": "其他",
                    "state": 1,   // 1：正在游戏， 2：已下注   -1: 弃牌
                    "putChips": [2, 5, 10, 20],
                    
                },
                {
                    "playerId": "1",
                    "playerName": '测试1',
                    "chip": 300,
                    "role": "大",
                    "state": 1,
                    "putChips": [2, 5, 10, 20],
                },
                {
                    "playerId": "2",
                    "playerName": '测试2',
                    "chip": 300,
                    "role": "小",
                    "state": 2,
                    "putChips": [2, 5, 10, 20],
                },
                {
                    "playerId": "3",
                    "playerName": '测试3',
                    "chip": 300,
                    "role": "枪",
                    "state": 2,
                    "putChips": [2, 5, 10, 20],
                },
                {
                    "playerId": "4",
                    "playerName": '测试4',
                    "chip": 300,
                    "role": "其他",
                    "state": -1,
                    "putChips": [2, 5, 10, 20],
                },
            ],
            currentPlayer: 0,  // 当前发言玩家
            playerInfo: 3,      // 玩家信息
            bigPlayerName: 1,
            smallPlayerName: 2,
            readyName: 3,
            
            chunk1: ['1'],
            chunk2: ['1'],
            
            // 当前轮次
            currentL: 1,
            
            
        }
    },
    methods: {
        fixPlayerName(name) {
            return name[0]
        },
        check() {
            this.$refs.optionCheck.type = 'info';
        },
        // 改变游戏对局里玩家的状态
        setPlayerState(playerIndex, state) {
        
        },
        
        // 点击玩家按钮，显示玩家信息
        showPlayerInfo(playerIndex) {
            let playerInfo = this.playerList[playerIndex];
            
        },
        
        // 拉起房间信息
        handleChange(val) {
            console.log(val)
        }
        
    },
    computed: {},
    beforeMount() {
        // console.log(this.roomInfo)
        // console.log(window.innerHeight)
        // console.log(window.innerWidth)
        // window.innerWidth = 320
        // window.resizeTo(320,580);
        
    },
    beforeCreate() {
        // $('head').append('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />');
        window.onload = function () {
            document.addEventListener('touchstart', function (event) {
                if (event.touches.length >= 2) {
                    this.message.error("start")
                    event.preventDefault();
                }
            })
            
            document.addEventListener('touchmove', function (event) {
                if (event.touches.length >= 2) {
                    this.message.error("move")
                    event.preventDefault();
                }
            })
            document.addEventListener('touchend', function (event) {
                if (event.touches.length >= 2) {
                    this.message.error("end")
                    event.preventDefault();
                }
            })
        }
    }
}
</script>

<style scoped>
/*body {*/
/*    height: 320px !important;*/
/*    width: 240px !important;*/
/*    background: #42b983;*/
/*}*/
body, html {
    width: 320px !important;
    height: 580px !important;
}

.fontSize {
    font-size: 12px !important;
}

.fontSize10 {
    font-size: 10px !important;
}

.roleStyle {
    margin: 0px !important;
    
}

.option {
    min-width: 45px;
    margin: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 5px;
    padding-right: 5px
}

.noPadding {
    padding: 0px !important;
}

.noMargin {
    margin: 0px !important;
}
</style>
